/**
 * Created by JLB1 on 2017/1/20.
 */
import React, { Component, PropTypes } from 'react'
import ReactDOM from "react-dom"
import AJAX from "../../lib/ajax";
import weui from 'weui.js';
require('../../lib/rem');
require('../../styles/common.less');
require('../../styles/resetWeui.less');
require('./Suggestions.less');
require('../../styles/lux.less');
import { addErrorListener } from "../../lib/handleError"
import InfiniteScroll from 'react-infinite-scroller'; // 无限加载
import weixinShare from '../../lib/weixinShare';
class Suggestions extends Component {
	constructor(props) {
		super(props);
		this.state = {
			feedback_list: [],//留言列表
			page: 1,
			psize: 10,
			isLoadMore: true,//是否可以加载更过
			isLoading: true,//是否请求中
		};
	}

	componentWillMount() {
		addErrorListener()()
		weixinShare.hideAll();
		window.addEventListener('scroll', this.handleScroll);
	}

	componentDidMount() {
		AJAX.appendBaiduAnalysis();
		this.fetchFeedbackList();
	}

	fetchFeedbackList = () => {
		const { page, psize, feedback_list } = this.state;
		const params = { page, psize };
		const loading = weui.loading('加载中');
		AJAX.request("feedback_list", params, (data) => {
			if (data.code == 0) {
				const { list = [] } = data.body;
				feedback_list.push(...list);
				this.setState({
					feedback_list,
					isLoadMore: list.length >= psize,
					isLoading: false
				});
			}
		});
		loading.hide();
	}

	handleScroll = () => {
		const { isLoadMore } = this.state;
		const { pageYOffset, innerHeight } = window;
		const { page } = this.state;
		const { clientHeight } = this.refs.suggestionsList;
		if (pageYOffset - (clientHeight - innerHeight) >= 50 && isLoadMore) {
			this.setState({
				page: page + 1,
				isLoadMore: false,
			}, () => this.fetchFeedbackList());
		}
	}

	render() {
		const { isLoading, isLoadMore, feedback_list } = this.state;
		return isLoading ? null : (
			<div className="suggestions">
				<div className="suggestions_box">
					<ul className="suggestions_list" ref="suggestionsList">
						{feedback_list.map(item => (
							<li
								className="suggestions_item"
								key={item.id}
								onClick={() => location.href = `./SuggestionDetail?feedback_id=${item.id}`}
							>
								<div className="item_info">
									<div className="info_title">
										<img src="https://cdn2.jinlb.cn/pic/fa/8f/fa8f4bb11f36d221af9bc50994897c9f.png" alt="" />
										<label>近邻宝-客服</label>
									</div>
									<span className="info_time">{item.update_time}</span>
								</div>
								<p className="item_content">
									{item.content}
								</p>
							</li>
						))}
					</ul>
					{isLoadMore ? null : <div className="loadEnd">已加载所有数据</div>}
				</div>
				
				<div className="suggestions_add">
					<a href="./SuggestionAdd">立即反馈</a>
				</div>
			</div>
		)
	}
}
ReactDOM.render(<Suggestions />, document.getElementById('app'));
if (module.hot) {
	module.hot.accept();
}

